<cfscript>
	ui = "users";
	view = "grid";
	obj = "user";
	roles = request.Base.getRoles();
	defaultFilter = {Active = 1, userIDs = "", roles = ""};
	filter = request.Base.getUIFilter(ui = ui, defaultFilter = defaultFilter);
</cfscript>

<script type="text/javascript">
<!--	
	<cfoutput>
		var ui = "#ui#";
		var view = "#view#";
		var obj = "#obj#";
		var roles = #SerializeJSON(roles)#;
		var filter = #SerializeJSON(filter)#;
	</cfoutput>
	
	var gridColumnsConfig = [
		{field: "user_id", title: "ID", template: "<a href='?ui=user&User_ID=#=user_id#'>#=user_id#</a>", width: 70},
		{field: "active", title: "Active", template: function(dataItem) {return (dataItem.active) ? "Yes" : "No"}, width: 100},
		{field: "last_name", title: "Name", template: "#=first_name# #=last_name#"},
		{field: "role", title: "Role"},
		{field: "email", title: "Email"},
		{field: "phone", title: "Phone", template: "#=phone#"}
	]
			
	$(function() {
		$("#grid").kendoGrid({
			dataSource: getGridDataSourceConfig(obj),
			columns: gridColumnsConfig,
			sortable: {allowUnsort: false},
			scrollable: true,
			pageable: gridPageableConfig,
			resizable: true,
			dataBound: function(e) {gridOnDataBound(this)}
		})
	});
//-->
</script>

<cfoutput>

	<div class="row" style="margin-bottom: 10px;">
		<div class="col-lg-12">
			<a href="#script_name#?ui=user&User_ID=0" class="btn btn-info">New&nbsp;user</a>
			<a id="filterLink" href="##" class="btn btn-info" onclick="toggleFilter('filters')">Show filters</a>
			<div class="btn-group">
				<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Actions</button>
				<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
				<ul class="dropdown-menu">
					<li><a href="?action=export&collection=#ui#" target="_new">Export</a></li>
				</ul>
			</div>
			<span class="pull-right"><span id="countLabel" class="badge"></span><!--- <cfif StructKeyExists(filter, "filter")>&nbsp;<span class="label label-warning">Filtered</span></cfif> ---></span>
		</div>
	</div>
	
	<form name="filterForm" id="filterForm" action="#script_name#" method="post">
		<input type="hidden" name="ui" value="#ui#">
		<input type="hidden" name="defaultFilter" value="#request.Base.cfmlToWDDX(defaultFilter)#" />
		<div id="filters" class="well well-small" style="display: none;">
			<table cellpadding="6">
				<tr valign="top">
					<td>
						<label>Roles</label>
						<select name="roles" class="form-control" size="4" multiple="true" required="yes" message="Roles filter is required">
							<option value=""<cfif filter.roles eq ""> selected</cfif>>All</option>
							<cfloop index="i" from="1" to="#ArrayLen(roles)#">
								<cfif roles[i].value neq "customer">
									<option value="#roles[i].value#"<cfif ListFind(filter.roles, roles[i].value) gt 0> selected</cfif>>#roles[i].text#</option>
								</cfif>
							</cfloop>
						</select>
					</td>
				</tr>
				<tr>
					<td colspan="5">
						<button type="submit" name="action" value="filter" class="btn btn-info">Apply</button> <button type="submit" name="action" value="resetFilter" class="btn btn-info">Clear</button>
					</td>
				</tr>
			</table>
		</div>
	</form>
	
	<div id="loading">
		<div class="progress progress-striped active" style="margin-left: 25%; margin-right: 25%; margin-top: 40px;">
			<div class="progress-bar progress-bar-info"  role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
			</div>
		</div>
	</div>
	<div id="grid" style="display: none;"></div>
	<div id="noRecs" class="alert alert-info" style="display: none;">No users</div>

</cfoutput>